<template>
  <div>
    <div style="margin-top:15px;" class="cursor">
      <span style="margin-right:24px;" @click="state.visible = true"
        >选择酒罐</span
      >
      <el-switch
        v-model="state.value"
        active-text="按并库计划顺序执行（开启开关后，自控执行时将判断前置移库是否执行完成）"
        inactive-text=""
      >
      </el-switch>
    </div>

    <!-- 表格 -->

    <ht-table
      class="ht-table-no-border"
      :data="state.dataSource"
      style="width: 100%; margin-top: 12px"
      border
      highlight-current-row
      :hide-page="true"
      :columns="columns"
    >
      <template slot="sortNo" slot-scope="{ row }">
        <div
          draggable
          style="  cursor: pointer;"
          @dragstart="handleDragStart($event, row)"
          @dragover="handleDragOver($event)"
          @drop="handleDrop($event, row)"
        >
          <Icon icon="drag"></Icon>
        </div>
      </template>

      <template slot="weight" slot-scope="{ row }">
        <div style="    position: relative;">
          <el-input
            placeholder="请输入"
            clearable
            v-model="row.weight"
          ></el-input
          ><span style="    position: absolute; right: 8px;top: 5px;">T</span>
        </div>
      </template>
      <template slot="handel" slot-scope="{ row }">
        <div @click="deleterow(row)" class="cursor" style="color: #D54545;">
          移除
        </div>
      </template>
    </ht-table>

    <!--  -->
    <ht-drawer
      class="ht-new-drawer"
      v-if="state.visible"
      v-model="state.visible"
      title="选择酒罐"
      size="100%"
    >
      <SelectWine ref="selectWine" :selectIds="state.dataSource"></SelectWine>

      <div slot="foot">
        <el-button
          :loading="state.loading"
          style="margin-left:24px;"
          type="primary"
          @click="next"
          >{{ state.text ? '确定选择' : '下一步' }}</el-button
        >

        <el-button :loading="state.loading" @click="state.visible = false"
          >取消</el-button
        >
      </div>
    </ht-drawer>
  </div>
</template>
<script lang="ts">
import Icon from '@/components/icon.vue';
import { IanaTimeZone } from '@/plugins/api';
import { Column } from 'htui-yllkbz/src/packages/type';
import { Component, Vue } from 'vue-property-decorator';
import SelectWine from './selectWine.vue';
interface State {
  /** 数据状态 */
  loading: boolean;
  value: any;
  dataSource: any;
  visible: boolean;
  draggingRowIndex: any;
  selectIds: string[];
  number: number | undefined;
  text: string;
}
@Component({
  components: {
    SelectWine,
    Icon,
  },
})
export default class Index extends Vue {
  /** 数据 */
  state: State = {
    loading: false,
    value: false,
    dataSource: [],
    visible: false,
    draggingRowIndex: '',

    // 已选资产ids
    selectIds: [],
    number: undefined,
    text: '',
  };
  /** 生命周期 */

  // mounted() {
  //   this.getDataSource();
  // }
  handleDragStart(event: any, row: any) {
    this.state.draggingRowIndex = this.state.dataSource.indexOf(row);
  }
  handleDragOver(event: any) {
    event.preventDefault();
  }
  handleDrop(event: any, row: any) {
    const droppingRowIndex = this.state.dataSource.indexOf(row);
    const draggingRow = this.state.dataSource[this.state.draggingRowIndex];
    this.state.dataSource.splice(this.state.draggingRowIndex, 1);
    this.state.dataSource.splice(droppingRowIndex, 0, draggingRow);
  }
  indexMethod(index: any) {
    return index + 1;
  }
  //移除
  deleterow(val: any) {
    this.state.dataSource = this.state.dataSource.filter(
      (item: any) => item.id != val.id
    );
  }
  next() {
    this.state.number = (this.$refs.selectWine as any).state.active;

    if (
      (this.$refs.selectWine as any).state.outSap.sapName &&
      this.state.number == 0
    ) {
      (this.$refs.selectWine as any).next();
    }
    if (
      (this.$refs.selectWine as any).state.inSap.sapName &&
      this.state.number == 1
    ) {
      (this.$refs.selectWine as any).next();
      this.state.text = (this.$refs.selectWine as any).state.inSap.sapName;
    }

    if (
      this.state.number == 2 &&
      (this.$refs.selectWine as any).state.outSap.sapName &&
      (this.$refs.selectWine as any).state.inSap.sapName
    ) {
      const obj = {
        /** 移出容器名称 */
        id: new Date().getTime(),
        outid: (this.$refs.selectWine as any).state.outSap.id,
        inid: (this.$refs.selectWine as any).state.inSap.id,

        outSapName: (this.$refs.selectWine as any).state.outSap.sapName,
        /** 移出容器Code */
        outSapCode: (this.$refs.selectWine as any).state.outSap.sapCode,
        outBreedCode: (this.$refs.selectWine as any).state.outSap.wineTrace
          .wineBreedCode,
        outBreedName: (this.$refs.selectWine as any).state.outSap.wineTrace
          .wineBreedName,
        /** 移入容器Code */
        /** 移入容器名称 */
        inSapName: (this.$refs.selectWine as any).state.inSap.sapName,
        inSapCode: (this.$refs.selectWine as any).state.inSap.sapCode,
        inBreedCode: (this.$refs.selectWine as any).state.inSap.wineTrace
          .wineBreedCode,
        inBreedName: (this.$refs.selectWine as any).state.inSap.wineTrace
          .wineBreedName,
        uom: 'T',
      };

      this.state.selectIds.push((this.$refs.selectWine as any).state.outSap.id);
      this.state.selectIds.push((this.$refs.selectWine as any).state.inSap.id);

      this.state.dataSource.push(obj);
      this.state.text = '';

      this.state.visible = false;
    }
  }
  /** 查询列表 */

  /** 方法 */

  /** 监听 */
  /** 计算属性 */
  get columns(): Column[] {
    return [
      { key: 'sortNo', title: '排序', width: 60 },

      { key: 'outSapName', title: '移出容器' },
      { key: 'outSapCode', title: '移出容器编号' },
      //
      { key: 'creationTime', title: '酒品名称' },
      { key: 'isSortStr', title: '酒品代码' },

      { key: 'inSapName', title: '移入容器' },
      { key: 'inSapCode', title: '移入容器编号' },
      { key: 'statusStr', title: '酒品名称' },
      { key: 'statusStr', title: '酒品代码' },
      { key: 'weight', title: '计划移库量', width: 220 },
      //

      //

      { key: 'handel', title: '操作', width: 130 },
    ];
  }
}
</script>
<style lang="scss" scoped>
.cursor {
  color: var(--primary);
  cursor: pointer;
}

:deep(.has-gutter) {
  background: rgb(237, 249, 241) !important;
}
</style>
